<template>
    <view class="article-detail-container">
      <view class="article-title">相亲不尬的实用攻略</view>
      <view class="article-read-count">39230人看过</view>
      <view class="article-tags">
        <view class="tag">#相亲</view>
        <view class="tag">#恋爱技巧</view>
      </view>
      <view class="article-content">
        <view>一、毒鸡汤变毒鸭汤示例对比</view>
        <view class="content-block">
          <view>（一）第一句</view>
          <view class="content-line">毒鸡汤：你娶谁都要买车、买房花彩礼，你千万别说是为了我。</view>
          <view class="content-line">毒鸭汤：你嫁谁都会变老变丑，还要生育，你别说是为了我。</view>
        </view>
        <view class="content-block">
          <view>（二）第二句</view>
          <view class="content-line">毒鸡汤：给你花钱的人不一定爱你，不给你花钱的人一定不爱你。</view>
          <view class="content-line">毒鸭汤：陪你睡的，不一定爱你，不陪你睡的，一定不爱你。</view>
        </view>
        <view class="content-block">
          <view>（三）第三句</view>
          <view class="content-line">毒鸡汤：一个女人幸福的背后是有一个宠她的男人。</view>
          <view class="content-line">毒鸭汤：男人成功的背后都有一个贤惠能干的女人。</view>
        </view>
      </view>
      <view class="article-evaluate">
        <view class="evaluate-btn">
          <uv-icon name="emotion-bad" size="36" color="#bbb" />
          <text>无用</text>
        </view>
        <view class="evaluate-btn active">
          <uv-icon name="emotion-good" size="36" color="#3c9cff" />
          <text>有用</text>
        </view>
      </view>

    </view>

	<uv-tabbar :value="value" @change="index=>value = index">
		<uv-tabbar-item text="首页" icon="home" dot></uv-tabbar-item>
		<uv-tabbar-item text="放映厅" icon="photo" badge="3"></uv-tabbar-item>
		<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
		<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
	</uv-tabbar>


  </template>
  
  <script>
  export default {
    name: 'ArticleDetail',
    data() {
			return {
				value: 0
			}
		}
  }
  </script>
  
  <style scoped>

  .article-detail-container {
    <!-- background: #fafbfc; -->
    min-height: 100vh;
    padding: 32rpx 0 120rpx 0;
  }
  .article-title {
    font-size: 38rpx;
    font-weight: bold;
    color: #222;
    margin: 0 32rpx 18rpx 32rpx;
    line-height: 1.4;
  }
  .article-read-count {
    color: #bbb;
    font-size: 26rpx;
    margin: 0 32rpx 18rpx 32rpx;
  }
  .article-tags {
    display: flex;
    gap: 18rpx;
    margin: 0 32rpx 32rpx 32rpx;
  }
  .tag {
    background: #f6f7fa;
    color: #888;
    font-size: 24rpx;
    border-radius: 32rpx;
    padding: 8rpx 28rpx;
  }
  .article-content {
    background: #fff;
    border-radius: 18rpx;
    margin: 0 24rpx 32rpx 24rpx;
    padding: 32rpx 28rpx 40rpx 28rpx;
    color: #222;
    font-size: 30rpx;
    line-height: 1.9;
  }
  .content-block {
    margin: 32rpx 0 0 0;
  }
  .content-line {
    margin: 12rpx 0 0 0;
  }
  .article-evaluate {
    display: flex;
    justify-content: center;
    gap: 32rpx;
    margin: 32rpx 0 0 0;
  }
  .evaluate-btn {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 18rpx;
    border: 2rpx solid #eee;
    padding: 16rpx 48rpx;
    font-size: 28rpx;
    color: #888;
    gap: 12rpx;
  }
  .evaluate-btn.active {
    border-color: #3c9cff;
    color: #3c9cff;
    font-weight: 500;
  }
  .article-bottom-bar {

  }
  .bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 26rpx;
    color: #222;
    gap: 8rpx;
  }
  </style>
  